@extends('layout.master')

@section('content-header')
    <h1>Notifikasi Kipem</h1>
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li class="active"><i class="fa fa-bell"></i> Notifikasi Kipem</li>
    </ol>
@stop

@section('content')
<div class="row">
    <div class="col-xs-12">

        <!-- Custom Tabs (Pulled to the right) -->
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs pull-right">
                <li class="active"><a href="{{ URL::route('kipems.notif') }}">Normal</a></li>
                <li><a href="{{ URL::route('kipems.notif.map') }}">Peta</a></li>
            </ul>
            <div class="box-body tab-content">

                <div id="map-placer" style="display: none;">
                    <a href="#" class="pull-right"><i class="fa fa-times-circle fa-lg"></i></a>
                    <div id="mapPopOver" class="map_canvas"></div>
                    <input type="text" id="latFld" class="hidden" value="">
                    <input type="text" id="lngFld" class="hidden" value="">
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-3">
                            <button class="semua btn btn-primary btn-lg btn-block"><strong>Semua</strong></br>{{ count($kipems_akan)+count($kipems_habis)+count($kipems_sudah) }}</button>
                        </div>
                        <div class="col-md-3">
                            <button class="akan btn btn-success btn-lg btn-block"><strong>Akan Habis</strong></br>{{ count($kipems_akan) }}</button>
                        </div>
                        <div class="col-md-3">
                            <button class="habis btn btn-warning btn-lg btn-block"><strong>Habis</strong></br>{{ count($kipems_habis) }}</button>
                        </div>
                        <div class="col-md-3">
                            <button class="sudah btn btn-danger btn-lg btn-block"><strong>Sudah Habis</strong></br>{{ count($kipems_sudah) }}</button>
                        </div>
                    </div>
                </div>

                <div class="table-full">
                    <table id="my-table" class="table table-bordered">
                        <thead>
                            <tr class="center">
                                <th>#</th>
                                <th>Nomor</th>
                                <th>KTP</th>
                                <th>Nama</th>
                                <th>Akhir</th>
                                <th>Harga</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $i = 1 ?>
                            @foreach ($kipems_akan as $akan)
                                <tr style="background-color: #dff0d8;">
                                    <td class="center">{{ $i }}</td>
                                    <td class="center">{{ $akan->nomor }}</td>
                                    <td class="center">{{ $akan->no_ktp }}</td>
                                    <td>{{ $akan->nama }}</td>
                                    <td>{{ date("d M Y",strtotime($akan->tanggal_akhir)) }}</td>
                                    <td>Rp {{ $akan->harga_kipem == ''? '-':$akan->harga_kipem }}</td>
                                    <td class="text-center">
                                        <?php
                                            $lat_lng = $akan->lokasi->lat_lng[0]."|".$akan->lokasi->lat_lng[1];
                                        ?>
                                        <a class="btn btn-default btn-map" data-latlng="{{ $lat_lng }}"><i class="fa fa-map-marker text-warning"></i></a>
                                        {{ HTML::decode(link_to_route('kipems.perpanjangan', '<i class="fa fa-pencil text-warning" data-toggle="tooltip" data-placement="top" data-original-title="Perpanjang"></i>', $akan->no_ktp, array('class'=>'btn btn-default btn-edit'))) }}
                                        {{ HTML::decode(link_to_route('kipems.inactive', '<i class="fa fa-times text-warning" data-toggle="tooltip" data-placement="top" data-original-title="Nonaktifkan"></i>', $akan->id, array('class'=>'global btn btn-default btn-edit'))) }}
                                    </td>
                                </tr>
                                <?php $i++ ?>
                            @endforeach
                            @foreach ($kipems_habis as $habis)
                                <tr style="background-color: #fcf8e3;">
                                    <td class="center">{{ $i }}</td>
                                    <td class="center">{{ $habis->nomor }}</td>
                                    <td class="center">{{ $habis->no_ktp }}</td>
                                    <td>{{ $habis->nama }}</td>
                                    <td>{{ date("d M Y",strtotime($habis->tanggal_akhir)) }}</td>
                                    <td>Rp {{ $habis->harga_kipem == ''? '-':$habis->harga_kipem }}</td>
                                    <td class="text-center">
                                        <?php
                                            $lat_lng = $habis->lokasi->lat_lng[0]."|".$habis->lokasi->lat_lng[1];
                                        ?>
                                        <a class="btn btn-default btn-map" data-latlng="{{ $lat_lng }}"><i class="fa fa-map-marker text-warning"></i></a>
                                        {{ HTML::decode(link_to_route('kipems.perpanjangan', '<i class="fa fa-pencil text-warning" data-toggle="tooltip" data-placement="top" data-original-title="Perpanjang"></i>', $habis->no_ktp, array('class'=>'btn btn-default btn-edit'))) }}
                                        {{ HTML::decode(link_to_route('kipems.inactive', '<i class="fa fa-times text-warning" data-toggle="tooltip" data-placement="top" data-original-title="Nonaktifkan"></i>', $habis->id, array('class'=>'global btn btn-default btn-edit'))) }}
                                    </td>
                                </tr>
                                <?php $i++ ?>
                            @endforeach
                            @foreach ($kipems_sudah as $sudah)
                                <tr style="background-color: #f2dede;">
                                    <td class="center">{{ $i }}</td>
                                    <td class="center">{{ $sudah->nomor }}</td>
                                    <td class="center">{{ $sudah->no_ktp }}</td>
                                    <td>{{ $sudah->nama }}</td>
                                    <td>{{ date("d M Y",strtotime($sudah->tanggal_akhir)) }}</td>
                                    <td>Rp {{ $sudah->harga_kipem == ''? '-':number_format($sudah->harga_kipem,0,',','.') }}</td>
                                    <td class="text-center">
                                        <?php
                                            $lat_lng = $sudah->lokasi->lat_lng[0]."|".$sudah->lokasi->lat_lng[1];
                                        ?>
                                        <a class="btn btn-default btn-map" data-latlng="{{ $lat_lng }}"><i class="fa fa-map-marker text-warning"></i></a>
                                        {{ HTML::decode(link_to_route('kipems.perpanjangan', '<i class="fa fa-pencil text-warning" data-toggle="tooltip" data-placement="top" data-original-title="Perpanjang"></i>', $sudah->no_ktp, array('class'=>'btn btn-default btn-edit'))) }}
                                        {{ HTML::decode(link_to_route('kipems.inactive', '<i class="fa fa-times text-warning" data-toggle="tooltip" data-placement="top" data-original-title="Nonaktifkan"></i>', $sudah->id, array('class'=>'global btn btn-default btn-edit'))) }}
                                    </td>
                                </tr>
                                <?php $i++ ?>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="table-search" style="display: none;">
                    <table id="my-table2" class="table table-bordered">
                        <thead>
                            <tr class="center">
                                <th>#</th>
                                <th>Lat Lng</th>
                                <th>Nomor</th>
                                <th>KTP</th>
                                <th>Nama</th>
                                <th>Akhir</th>
                                <th>Harga</th>
                                <th width="10%">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>

            </div><!-- /.tab-content -->
        </div><!-- nav-tabs-custom -->

    </div>
</div>
@stop

@section('javascript')
<script type="text/javascript">
    var temp = false;
    var btnAct = '';
    var notif;
    var notifClass;
    var polygonCoords       = [];
    var markersPopoverArray = [];
    var global_lat_lng;

    function initialize_map_popover(id_map, lat_lng) {
        console.log(lat_lng);
        var lat_lng = lat_lng.split('|');
        var map_canvas = document.getElementById(id_map);
        var map_options = {
            center: new google.maps.LatLng( {{ $lingkungan['lat_lng'][0] }}, {{ $lingkungan['lat_lng'][1] }} ),
            zoom: {{ isset($lingkungan['zoom']) ? $lingkungan['zoom'] : '18';  }},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options);

        // get polygon data
        var promise = $.getJSON("{{ URL::route('lingkungan.get.polygon.json') }}");
        promise.done(function(coordinates){
            for (var key in coordinates) {
                var lat_lng = coordinates[key];
                polygonCoords.push(new google.maps.LatLng(lat_lng.lat, lat_lng.lng));
            }

            if(polygonCoords.length > 0) {
                var polygon = new google.maps.Polygon({
                    paths: polygonCoords
                });
                polygon.setMap(map);
            }
        });

        // Add marker
        var location = new google.maps.LatLng(lat_lng[0], lat_lng[1]);
        map.setCenter(new google.maps.LatLng(lat_lng[0], lat_lng[1]));

        var marker = new google.maps.Marker({
            position: location,
            draggable: true,
            map: map
        });

        google.maps.event.addListener(marker, 'dragend', function()
        {
            $('#latFld').val( marker.getPosition().d );
            $('#lngFld').val( marker.getPosition().e );
        });
    }
    $(function() {
        $('#my-table').dataTable({
            "bPaginate": true,
            "bLengthChange": false,
            "bSort": false,
            "bInfo": true,
            "bAutoWidth": false
        });
        notif = $('#my-table2').dataTable({
            "aoColumns": [
                { "bSearchable": false, "bSortable": false, "sClass": "text-center"},
                { "bSearchable": false, "bSortable": false, "sClass": "text-center", "bVisible": false },
                { "bSearchable": false, "bSortable": true, "sClass": "text-center" },
                { "bSearchable": true, "bSortable": true, "sClass": "text-center" },
                { "bSearchable": true, "bSortable": true },
                { "bSearchable": true, "bSortable": true, "sClass": "text-center" },
                { "bSearchable": true, "bSortable": true, "sClass": "text-center" },
                { "bSearchable": false, "bSortable": false, "sClass": "text-center" }
            ],
            "aLengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
            "iDisplayLength": 50,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "{{ URL::route('kipems.notif-get') }}",
            "bPaginate": true,
            "bSort": true,
            "bAutoWidth": false,
            "fnServerData": function( sSource, aoData, fnCallback ){
                aoData.push(
                    { "name" : "notifAct", "value" : btnAct }
                );
                $.getJSON( sSource, aoData, function (json) {
                    fnCallback(json);
                });
            },
            "fnDrawCallback": function(oSettings){
                if(oSettings.bSorted || oSettings.bFiltered){
                    for(var i =0, iLen = oSettings.aiDisplay.length; i<iLen; i++){
                        $('td:eq(0)',oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i+1);
                        $(oSettings.aoData[oSettings.aiDisplay[i]].nTr).css('background-color', notifClass);
                    }
                }
                if(btnAct != '')
                {
                    $('.table-full').hide();
                    $('.table-search').show();
                } else
                {
                    $('.table-full').show();
                    $('.table-search').hide();
                }
            }
        });
        $('.semua').click(function(event) {
            btnAct = '';
            notifClass = '';
            notif.fnReloadAjax();
        });
        $('.akan').click(function(event) {
            btnAct = 1;
            notifClass = "#dff0d8";
            notif.fnReloadAjax();
        });
        $('.habis').click(function(event) {
            btnAct = 2;
            notifClass = "#fcf8e3";
            notif.fnReloadAjax();
        });
        $('.sudah').click(function(event) {
            btnAct = 3;
            notifClass = "#f2dede";
            notif.fnReloadAjax();
        });
        $('.box-body').on('click', '.btn-inactive', function(event) {
            var that = $(this);
            if (!temp) {
                event.preventDefault();
                bootbox.confirm('Yakin nonaktifkan data ini?', function(yes){
                    // console.log(yes);
                    if (yes) {
                        temp = true;
                        that.click();
                    } else {
                        temp = false;
                    };
                });
            } else {
                location.href = that.attr('href');
            };
        });
        $('.box-body').on('click', '.global', function(event) {
            var that = $(this);
            if (!temp) {
                event.preventDefault();
                bootbox.confirm('Yakin nonaktifkan data ini?', function(yes){
                    // console.log(yes);
                    if (yes) {
                        temp = true;
                        that.click();
                    } else {
                        temp = false;
                    };
                });
            } else {
                location.href = that.attr('href');
            };
        });
        $('.box-body').on('click', '.btn-map', function(event) {
            // event.preventDefault();

            var lat_lng = $(this).data('latlng');
            console.log(lat_lng);
            $('#map-placer').show('400', function() {
                initialize_map_popover('mapPopOver',lat_lng);
            });
        });

        $('#map-placer a').click(function(event) {
            event.preventDefault();

            $('#map-placer').hide('400');
        });
    });
</script>
@stop
